<template>
  <div class="app">
    <el-header>
      <title-bar-vue></title-bar-vue>
    </el-header>
    <el-container>
      <el-aside class="aside" width="230px">
        <resource-manager @addNumApp="getNumApp"></resource-manager>
      </el-aside>
      <el-main style="padding: 10">
   
      <router-view></router-view>
      </el-main>
    </el-container>

    <el-dialog
      v-model="dialogVisible"
      title="新建工程向导"
      width="650px"
      :close-on-click-modal="false"
      append-to-body 
      draggable
    >
      <ProjectManagerVue></ProjectManagerVue>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ResourceManager from './views/resource-manager/resource-manager.vue'
import TitleBarVue from './views/title-bar/title-bar.vue'
import {  nextTick, provide } from "vue";
import ProjectManagerVue from './views/new-project/project-manager.vue'
// import linearVue from './views/compu-method/linear.vue'

import emitter from './utils/mitt'

export default defineComponent({
  components: {
    TitleBarVue,
    ResourceManager,
    ProjectManagerVue,
    // linearVue
  },
  data(){
    return{
      parentNum:0

    }
  },
  setup() {
    const dialogVisible = ref(false)
    emitter.on('open-newproject', () => {
      dialogVisible.value = true
    })
    emitter.on('close-newproject', () => {
      dialogVisible.value = false
    })
     // 局部组件刷新
    const isRouterAlive = ref(true);
    const reload = () => {
      isRouterAlive.value = false;
      nextTick(() => {
        isRouterAlive.value = true;
      });
    };
    provide("reload", reload);
 
 
    return { dialogVisible , isRouterAlive,}
  },
  methods:{
      getNumApp(childNum: number){
                this.parentNum = childNum
                console.log("App")
                console.log(this.parentNum)
                this.$router.push({name:'home',params:{id:this.parentNum}})
            }
 
  }  
  

})
</script>

<style scoped lang="less">
@import 'assets/style/index';
.app {
  height: 100%;
  width: 100%;
  .el-header {
    height: 31px !important;
    padding: 0;
    border-bottom: @border-style;
  }
  .el-container {
    height: calc(~'100% - @{main-row-height}');
  }
  .newproject-dialog {
    max-height: 500px;
  }
}
</style>
